<template>
	<div class="card-service mt16">
		<div class="title">
			<span>仅限{{provName}}门店使用</span>
		</div>
		<div class="title">
			<p>服务项目</p>
		</div>
		<div class="con-wrap" v-for="item in cardServiceData">
			<span></span>
			<p>{{item}}</p>
		</div>
	</div>
</template>

<script type="text/javascript">
import common from '../../utils/common';
export default {
	data: function () {
		return {
			shortName:'',
			cardServiceData:[],
			provName:''
		}
	},
  	events: {
	  	cardServiceData: function ( shortName, cardServiceData, provName) {
	  		this.shortName = localStorage.defaultcityname;
	  		this.provName = provName;
	  		if(cardServiceData.length > 0){
	  			for(var i = 0; i < cardServiceData.length; i++){
	  				if(cardServiceData[i].attrDefNo == "serviceItems"){
	  					
	  					if(cardServiceData[i].value.indexOf(",") != -1){
	  						this.cardServiceData = cardServiceData[i].value.split(",");
	  					}else{
	  						this.cardServiceData = cardServiceData[i].value.split("，");
	  					}
	  					
	  				}else{
	  					return false;
	  				}
	  			}
	  		}
	  		//console.log(this.cardServiceData);
	  	},
	  	setCityName:function(areaInfoVo){
	  		if(areaInfoVo){
	  			console.log(areaInfoVo);
	  			this.shortName = areaInfoVo.areaName;
	  			localStorage.cardBuyCityId = areaInfoVo.areaCode;

	  			localStorage.defaultcityname = areaInfoVo.areaName;

	  			console.log('本地存储内没有');
	  		}
	  	}
	}
}
</script>


<style lang="scss">
	@import "../../assets/css/_functions.scss";	
	@import "../../assets/css/_variables.scss";	
	
	.card-service{
		background: #fff;
		overflow: hidden;
		>.title{
			padding-left: rem(15);
			height: rem(44);
			line-height: rem(44);
			font-size:rem(14);
			color:#1f323e;
			border-bottom: 1px solid #dedede;
			display: flex;
			>p{
				margin-right: rem(12);
			}
			span{
				font-size: rem(13);
				color:#666;
			}
		}
		>.con-wrap{
			width: rem(360);
			margin-left: rem(15);
			height: rem(44);
			line-height: rem(44);
			border-bottom: 1px solid #dedede;
			box-sizing: content-box;
			display:flex;
			justify-content: flex-start; 
			span{
				background:#ededed;
				width:rem(10);
				height:rem(10);
				margin-right: rem(10);
				margin-top:rem(17);
				border-radius:100%;
			}
			p{
				font-size:rem(13);
				color:#666666;
				letter-spacing:-0.32px;
			}
			&:last-child{
				border-bottom: none;
			}
		}
	}
</style>